import { View } from "@tarojs/components"
import { useEffect, useState } from "react"
import { AtButton, AtIcon } from "taro-ui"
import { collectionType } from "src/pages/collection/type"
import { commentPanelType } from "./types"
import './index.less'

const tools = ['share', 'menu', 'heart']

type propsType = {
    collection: collectionType,
    panel: commentPanelType,
    fixed?: boolean,    // 是否固定panel
    showNum?: boolean // 显示有多少个赞、多少条评论
}

function CommentPanel(props: propsType) {
    const { collection, panel } = props

    const [customStyle, setCustomStyle] = useState({})
    const [isLike, setIsLike] = useState(false)
    const [numVisible,] = useState(props?.showNum ?? false)

    useEffect(() => {
        const fixed = props?.fixed ?? false
        const _isLike = collection?.user?.isLike ?? false
        setIsLike(_isLike)
        if (fixed) {
            setCustomStyle({
                position: 'fixed',
                top: 'calc(100vh - 40px)'
            })
        } else {
            setCustomStyle({})
        }
    }, [props])

    function clickIcon(v: string) {
        const res = panel.find(item => item.key == v)
        if (res?.onClick) res!.onClick()
        switch (v) {
            case 'menu':
                break
            case 'heart':
                setIsLike(!isLike)
                break
        }
    }

    return <View className='at-row comment-panel' style={customStyle}>
        {
            tools.map((v, k) => {
                return <View className='at-col at-col-4' key={k}>
                    <AtButton className='at-row at-row__justify--center' onClick={() => clickIcon(v)} openType={v} >
                        {
                            v == 'heart' ?
                                <>
                                    <AtIcon value={isLike ? 'heart-2' : v} size='16' color={isLike ? 'red' : ''}></AtIcon>
                                    {
                                        numVisible &&
                                        <>
                                            &nbsp;&nbsp;
                                            {collection.content.like}
                                        </>
                                    }
                                </> :
                                <AtIcon value={v} size='16'></AtIcon>
                        }
                    </AtButton>
                </View>
            })
        }
    </View>
}

export default CommentPanel